<template>
  <div>
    <div class="page-bg">
      <img src="@/assets/images/login/qc_activity.png" class="head-img" alt="">
      <div class="head-btn-sty">
        <div class="apply-btn" @click="applyBtn()">Apply Here</div>
        <div class="reward-btn" @click="rewardPop = true">My Reward</div>
      </div>
      <div class="awards-rect">
        <div class="rect-title">USERS WHO ALREADY WON</div>
        <div class="sub-rect-title">
          Share your shopping experience on social media, everyone can make an amazing influencer!
        </div>
        <div class="awards-list-bg">
          <Row>
            <Col span="6" v-for="item in dataList" :key="item.id" :class="dataList.length > 12 ? 'list-content' : ''">
            <div class="list-text">
              {{ item.inviteCode }} Reward ${{ item.rewardPrice }}
            </div>
            </Col>
          </Row>
        </div>
      </div>
      <div class="rules-rect">
        <img class="corner-mark" src="@/assets/images/login/stare.webp" alt="">
        <div class="rules-title">DESCRIPTION</div>
        <div class="sub-title-text">The process of winning this reward:</div>
        <div class="text">
          1. Once you receive your 100buy parcel, please share your unboxing experience on social media,with preference
          given to video sharing.
        </div>
        <div class="text">
          2. Submit the sharing link on the 100buy Parcel Page and click the Apply Reward button. Please ensure that
          the link is redirected to the content page of your 100buy shopping experience on social media.
        </div>
        <div class="text">3. 100buy manually verifies each review and issues the rewards accordingly.</div>
        <div class="sub-title-text">Why do 100buyoffer rewards for social media sharing?</div>
        <div class="text">
          We believe that when users share their cross-border shopping experience, it provides a higher-level reference
          for those who have not yet experienced it. Additionally, we welcome constructive criticism to help us optimize
          our service.
        </div>
        <div class="sub-title-text">What is 100buy'review standard?</div>
        <div class="text">We consider the helpfulness of the content and the level of influence it has on social media.
          If you have shared your content on multiple platforms, you can submit your proudest link to us for review. If
          you are new to social media sharing, don’t worry; we manually review each submission.
        </div>
        <div class="sub-title-text">What are the rewards for sharing?</div>
        <div class="text">
          You can earn up to 100% cash reward (equivalent to the amount of your order and parcel shipping fee) for your
          hard work.
        </div>
        <div class="text">
          We value your feedback, both positive and negative, as it helps us improve our service. However, please
          note that invalid links will result in rejected reward applications, and sharing QC content will result in a
          reward of $1-$5 only.
        </div>
        <div class="text">
          Finally, we kindly remind you that if you delete the sharing link within 3 months after receiving the
          reward, your future applications will be permanently disqualified.
        </div>
      </div>
    </div>
    <!-- 申请奖励弹框 -->
    <Modal v-model="applyPop" title="Apply here" width="40" :mask-closable="false" class-name="vertical-center-modal">
      <div class="apply-content">
        <div class="content-label">
          <span>*</span> Sharing URL：
        </div>
        <Input v-model="form.shareUrl" placeholder="Enter a URL that can accurately lead to the comment page." />
        <div class="content-label">
          <span>*</span> Social Media：
        </div>
        <RadioGroup v-model="form.medium">
          <Radio label="Reddit"></Radio>
          <Radio label="Trustpilot"></Radio>
          <Radio label="Tiktok"></Radio>
          <Radio label="Youtube"></Radio>
          <Radio label="Instagram"></Radio>
        </RadioGroup>
        <div class="desc-sty" v-if="form.medium == 'Trustpilot'">
          <div class="radio-text">Click the link below to share your experience on 100buy</div>
          <div class="radio-text"><span> https://www.trustpilot.com/review/100buy.com</span></div>
          <div class="radio-text">
            Thank you for supporting 100buy! We invite you to share your service experience on Trustpilot.<span>To
              ensure your privacy, please avoid mentioning any specific product information in your review</span>
            ; focus instead on your overall experience. Ensure the link you submit is valid and keep an eye on your
            100buy message box for verification results.
          </div>
          <div class="radio-text">If you have any questions about the rewards, please contact us via email at
            <span>support07@100buy.com</span>.
          </div>
        </div>
        <div class="desc-sty" v-else>
          <div class="radio-text">We'll start verifying your sharing link as soon as possible.</div>
          <div class="radio-text">
            Please leave your exclusive code <span>user exclusive code {{ userInfo.inviteCode }}</span> in the comment
            box of
            the post and
            make sure
            the sharing link is valid. Otherwise, it may affect the reward issuance. Thanks for your
            sharing!
          </div>
          <div class="radio-text">
            If you have any questions about the reward, please contact us via <span>customer service email:
              support07@100buy.com</span>.
          </div>
        </div>
        <div class="content-label">
          <span>*</span> Relevant order number：
        </div>
        <Input v-model="form.orderNo" placeholder="Enter a URL that can accurately lead to the comment page." />
      </div>
      <div slot="footer" class="footer-sty">
        <div class="cancel-btn" @click="closeBtn">Cancel</div>
        <div class="confirm-btn" @click="submitBtn">Submit</div>
      </div>
    </Modal>
    <!-- 我的奖励 -->
    <Modal v-model="rewardPop" title="My Reward" width="50" :mask-closable="false" class-name="vertical-center-modal">
      <div class="reward-content" v-if="rewardList">
        <Row :gutter="18">
          <Col span="12" v-for="item in rewardList" :key="item.id">
          <div class="card-sty">
            <img src="@/assets/images/login/is_reward.webp" v-if="item.status == 'CHECK_SUCCESS'" class="is-reward"
              alt="">
            <div class="card-head">
              <div class="head-default">
                <div class="head-label">Order number</div>
                <div class="head-content">{{ item.orderNo }}</div>
              </div>
              <div class="head-default">
                <div class="head-label">Submit Date</div>
                <div class="head-content">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="card-content" v-if="item.status == 'CHECK_SUCCESS'">
              <div class="head-default">
                <div class="head-label">Credited to</div>
                <div class="head-content">Wallet</div>
              </div>
              <div class="head-default">
                <div class="head-label">Cashback</div>
                <div v-if="item.source == 'GROUP'" class="color-text">Manually issue coupons</div>
                <div v-else class="color-text">CNY {{ item.rewardPrice }} ≈ {{ userInfo.currencySymbol }} {{
                  item.currencyPrice
                }}</div>
              </div>
            </div>
            <div class="un-reward-sty" v-if="item.status == 'CHECK_REJECT'">
              <div class="un-reward-label">Note</div>
              <div class="un-reward-tips">{{ item.remark }}</div>
            </div>
          </div>
          </Col>
        </Row>
      </div>
      <div class="no-data-sty" v-if="!rewardList || rewardList.length == 0">
        <img src="@/assets/images/login/empty.webp" class="empty-img" alt="">
        <div class="empty-desc">You haven't submitted any shared content yet.</div>
        <div class="empty-desc"> You can get up to 100% free reward. Share now! </div>
      </div>
      <div slot="footer" class="footer-sty">
        <div class="confirm-btn" @click="closeBtn()">OK</div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { rewardList, rewardApply, rewardUserList } from "@/api/activity";
import { mapState } from "vuex";
export default {
  data() {
    return {
      dataList: [],
      rewardList: [],
      applyPop: false,
      rewardPop: false,
      form: {
        medium: 'Reddit'
      },
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created() {
    this.getList();
    this.getUserList();
  },
  methods: {
    getList() {
      rewardList().then((res) => {
        this.dataList = res.result;
      })
    },
    getUserList() {
      rewardUserList().then((res) => {
        this.rewardList = res.result;
      })
    },
    closeBtn() {
      this.rewardPop = false;
      this.applyPop = false;
      this.form = {};
      this.form.medium = 'Reddit';
    },
    applyBtn() {
      this.applyPop = true;
    },
    submitBtn() {
      if (this.$route.query.source) {
        // 拼团点击“申请奖励”并且填写分享链接
        if (this.$analytics) {
          this.$analytics.logEvent('pt_1011');
        }
      }

      // this.$route.query.source 拼团分享
      this.form.source = this.$route.query.source ? this.$route.query.source : 'COMMON_SHARE';
      rewardApply(this.form).then((res) => {
        this.applyPop = false;
        this.$Message.success('Success!');
        this.form = {};
        this.form.medium = 'Reddit';
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ivu-modal-close {
  right: 24px;
  top: 28px;

  .ivu-icon-ios-close {
    font-size: 48px;
    color: #1E1714;
  }
}

/deep/.ivu-modal-header {
  border: none;
  padding: 34px 32px 0 32px;

  .ivu-modal-header-inner {
    height: 33px;
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 24px;
    color: #1E1714;
    line-height: 28px;
  }
}

/deep/.ivu-modal-body {
  padding: 0 32px;
}

/deep/.ivu-modal-footer {
  border: none;
  padding: 32px;
}

.apply-content {

  .content-label {
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 20px;
    color: #333333;
    line-height: 23px;
    margin-bottom: 12px;
    margin-top: 24px;

    span {
      color: #FF186B;
    }
  }

  :deep(.ivu-input) {
    height: 44px;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #E5E5E5;
    font-size: 15px;
    padding: 12px 16px;
  }

  :deep(.ivu-radio-group) {
    display: inline-flex;
    gap: 24px;
    margin-left: 16px;
    margin-top: 20px;

    .ivu-radio-wrapper {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
    }
  }

  .desc-sty {
    margin-top: 16px;
    margin-left: 16px;

    .radio-text {
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 15px;
      color: #000000;
      line-height: 18px;
      margin-top: 4px;
      text-align: justify;

      span {
        color: #FF186B;
      }
    }
  }
}

.reward-content {
  height: 460px;
  overflow-y: scroll;
  overflow-x: hidden;

  .card-sty {
    padding: 16px 17px;
    background: #F7F9FC;
    border-radius: 8px 8px 8px 8px;
    // margin-bottom: 20px;
    margin-top: 25px;
    position: relative;

    .is-reward {
      width: 85px;
      height: 73px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .card-head {
      display: flex;
      gap: 48px;
      margin-bottom: 16px;

      .head-default {
        width: 50%;
        display: flex;
        flex-direction: column;

        .head-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #767B93;
          line-height: 21px;
        }

        .head-content {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #1E1714;
          line-height: 19px;
          margin-top: 4px;
        }
      }
    }
  }

  .card-content {
    display: flex;
    gap: 48px;

    .head-default {
      width: 50%;
      display: flex;
      flex-direction: column;

      .head-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #767B93;
        line-height: 21px;
      }

      .head-content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
        margin-top: 4px;
      }

      .color-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #FF186B;
        line-height: 19px;
      }
    }
  }

  .un-reward-sty {
    .un-reward-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #767B93;
      line-height: 21px;
    }

    .un-reward-tips {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      margin-top: 4px;
    }
  }
}

.no-data-sty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;

  .empty-img {
    width: 148px;
    height: 148px;
  }

  .empty-desc {
    font-family: Open Sans, Open Sans;
    font-weight: 400;
    font-size: 24px;
    color: #AEB0B9;
    line-height: 28px;
  }
}

.footer-sty {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 57px;

  .cancel-btn {
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 18px;
    color: #FF186B;
    line-height: 21px;
    cursor: pointer;
  }

  .confirm-btn {
    padding: 10px 25px;
    background: #F21473;
    border-radius: 8px;
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 21px;
    cursor: pointer;
  }
}

.page-bg {
  width: 100%;
  height: 100%;
  background: #FFF5F7;
  padding-bottom: 126px;
  min-height: 900px;

  .head-img {
    width: 100%;
  }

  .head-btn-sty {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 32px;

    .apply-btn {
      padding: 13px 48px;
      background: #FF186B;
      border-radius: 42px;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 17px;
      color: #FFFFFF;
      line-height: 19px;
      cursor: pointer;
    }

    .reward-btn {
      padding: 13px 48px;
      border: 2px solid #FF186B;
      border-radius: 42px;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 17px;
      color: #FF186B;
      line-height: 19px;
      cursor: pointer;
    }
  }

  .awards-rect {
    width: 86%;
    padding: 32px;
    background: #FF73A0;
    border-radius: 12px 12px 12px 12px;
    margin: 0 auto;
    margin-top: 56px;

    .rect-title {
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 28px;
      color: #FFFFFF;
      line-height: 27px;
      text-align: center;
    }

    .sub-rect-title {
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 15px;
      text-align: center;
      margin-top: 12px;
    }

    .awards-list-bg {
      height: 173px;
      overflow-y: hidden;

      padding: 32px 32px 0 32px;
      margin-top: 32px;
      width: 100%;
      background: #FFFFFF;
      border-radius: 12px 12px 12px 12px;

      .list-content {
        animation: scrollAnimation 5s linear infinite;

        .list-text {
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 16px;
          color: #1E1714;
          line-height: 15px;
          margin-bottom: 32px;
        }
      }

      .list-text {
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 16px;
        color: #1E1714;
        line-height: 15px;
        margin-bottom: 32px;
      }

      @keyframes scrollAnimation {
        from {
          transform: translateY(0);
        }

        to {
          transform: translateY(-100%);
        }
      }
    }
  }

  .rules-rect {
    width: 86%;
    padding: 56px 37px;
    background: #FFFFFF;
    border-radius: 12px;
    margin: 0 auto;
    margin-top: 54px;
    position: relative;

    .corner-mark {
      width: 108px;
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .rules-title {
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 28px;
      color: #FF186B;
      line-height: 27px;
      text-align: center;
      margin-bottom: 32px;
    }

    .sub-title-text {
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 16px;
      color: #1E1714;
      line-height: 15px;
      margin-bottom: 12px;
      margin-top: 24px;
    }

    .text {
      font-family: Open Sans, Open Sans;
      font-weight: 500;
      font-size: 16px;
      color: #767B93;
      line-height: 19px;
      margin-bottom: 8px;
    }
  }
}
</style>